<template>
    <div class="tabbtn" @click="click">
        <span :class="active?'active':'noactive'">{{ title }}</span>
    </div>
</template>
<script>
    export default {
        props:{
            title:{
                type:String,
                default:'茶产业抢收作战'
            },
            active:{
                type:Boolean,
                default:false
            }
        },
        methods:{
            click(e){
                this.$emit('click',e)
            }
        }
    }
</script>
<style lang="scss">
    .tabbtn {
        height: 37px;
        border-radius: 30px;
        opacity: 1;

        /* 自动布局 */
        display: flex;
        flex-direction: column;
        padding: 8px 16px;

        background: rgba(30, 186, 137, 0.15);

        box-sizing: border-box;
        /* 框背景2 */
        border: 1px solid rgba(14, 38, 29, 0.45);

        z-index: 0;
        span {
            opacity: 1;

            font-family: 思源黑体;
            font-size: 14px;
            font-weight: bold;
            line-height: normal;
            letter-spacing: 0em;

            font-variation-settings: "opsz" auto;
            font-feature-settings: "kern" on;
            cursor: pointer;

            z-index: 0;
        }
        .active{
            /* 纯白 */
            color: #FFFFFF;
        }
        .noactive{
            color: rgba(208, 255, 242, 0.8);
        }
    }
</style>